import React, { Component } from 'react';
import { goods_list, goods_cunt, goods_add, goods_clare } from '../../utils/api';
import './index.scss'
class MyShoplist extends Component {
    state = {
        shopcartlist: [],
        goodsprice: 0,
        num: 0
    };
    componentDidMount() {
        this.getlis()
    }
    clear() {
        goods_clare({ userid: localStorage.getItem("userid") }).then(res => {
            console.log(res);
            if (res.data.code == 200) {
                this.getlis()
            }
        })
    }
    // 获取购物车列表
    getlis() {
        goods_list({ params: { userid: localStorage.getItem("userid") } }).then(res => {
            console.log(res);
            this.setState({
                shopcartlist: res.data.list
            }, () => {
                this.getgoodprice()
            })
        })
    }
    // 计算总价和数量
    getgoodprice() {
        let x = this.state.shopcartlist.reduce((t, item) => {
            return t + item.count / 1 * item.salesPrice.value / 1
        }, 0)
        let num = this.state.shopcartlist.reduce((t, item) => {
            return t + item.count / 1
        }, 0)
        this.setState({
            goodsprice: x,
            num
        })
    }
    // 数量+1
    addgoods(e) {
        goods_add({ userid: localStorage.getItem("userid"), goodid: e }).then(res => {
            if (res.data.code == 200) {
                this.getlis()
            }
        }, () => {
            this.getgoodprice()
        })
    };
    // 数量-1
    cuntgoods(e) {
        goods_cunt({ userid: localStorage.getItem("userid"), goodid: e }).then(res => {
            if (res.data.code == 200) {
                this.getlis()
            }
        }, () => {
            this.getgoodprice()
        })
    }
    render() {
        return (
            <div className='myshopcartlist' style={{ display: this.state.shopcartlist.length > 0 ? "block" : "none" }}>

                {this.state.shopcartlist.map((item, index) => {
                    return (
                        <div className='shop' key={index}>
                            <div className='contentleft'>
                                <input className='chocice' type="radio" name="" id="" />
                                <img src={item.pic} alt="" />
                            </div>

                            <div className='shopcontent'>
                                <p className='name'>{item.name}</p>
                                <div className='bao'>  <span >包邮包税</span></div>
                                <div className='manjian'>  <span >满200/800，</span></div>
                                <div className='huifu'>  <span >3天后恢复原价</span></div>
                                <div className='pricebox'>
                                    <span className='price'>￥{item.salesPrice.value}</span>
                                    <div className="pricebtnbox">
                                        <button className='computedbtn min'
                                            onClick={() => { this.cuntgoods(item.id) }}
                                        >-</button>
                                        <input className='num' onChange={() => { }} type="text" value={item.count} />
                                        <button className='computedbtn add' onClick={() => {
                                            this.addgoods(item.id)
                                        }}>+</button>
                                        <span className='limit'>限购8件</span>
                                    </div>
                                </div>
                            </div>

                        </div>)
                })}
                <div className='result'>
                    <div className='choiceall'><input type="radio" />全选</div>
                    <div className='choiceall' onClick={() => { this.clear() }}>清空购物车</div>
                    <div className='allprice'>总价:<span>￥{this.state.goodsprice}</span> </div>
                    <div className='resBtn'>去结算(<span>{this.state.num}</span>)</div>
                </div>
            </div>
        );
    }
}

export default MyShoplist;